<template>
    <a-drawer v-model:open="model" @close="closeCheck" :get-container="getContainer" :maskClosable="false"
        :width="width" :headerStyle="{ padding: '8px 16px' }" :bodyStyle="{ padding: '8px 16px' }" :keyboard="false">
        <template #closeIcon>
            <el-button type="primary" text plain :icon="ArrowLeftBold" style="padding: 0 10px 0 15px;"></el-button>
        </template>
        <template #title>
            <div style="display: flex;">
                <el-button type="primary" @click="onSubmit" :disabled="!isEdit"
                    v-if="props.headerButton == 'all' || props.headerButton.indexOf('submit') >= 0">确 定</el-button>
                <el-button :disabled="isEdit"
                    v-if="props.headerButton == 'all' || props.headerButton.indexOf('edit') >= 0">
                    <el-checkbox v-model="isEdit" label="编辑" :disabled="isEdit" />
                </el-button>
                <slot name="btn">
                </slot>
                <i style="flex: 1;"></i>
                <el-text type="primary" size="large"> {{ props.title }}</el-text>
                <i style="flex: 2;"></i>
            </div>
        </template>
        <template #extra>
            <el-button type="primary" text plain :icon="getContainer ? Crop : FullScreen" style="padding: 0 0 0 5px;"
                @click="fullScreen" />
        </template>
        <slot>
        </slot>
    </a-drawer>
</template>
<script lang="ts" setup>
//嵌入父节点的抽屉, 通过show, close控制显示与隐藏, 自带关闭按钮, 点击遮罩层自动关闭
// 用法: 只能用ref, 不能用open属性控制抽屉的展开与关闭
// <MkDrawer ref="drawerRef" @submit="submit" v-model:isEdit="r.isEdit"></MkDrawer>
// drawerRef.value.show();
// drawerRef.value.close();
import { ref, computed } from 'vue';
// 抽屉
// import { Drawer } from 'ant-design-vue';
import { Crop, FullScreen, ArrowLeftBold } from '@element-plus/icons-vue'
import { useWindowSize } from '@vueuse/core'
import { ElMessageBox } from 'element-plus'

defineOptions({
    name: 'MkDrawer'
})
// props
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    headerButton: {
        type: String,
        default: "all" // all: 显示取消和确定, none: 都不显示,  edit: 只显示编辑,  submit: 只显示确定,  edit|submit : 编辑和确定
    },
})

const isEdit = defineModel("isEdit")
const model = defineModel()
const getContainer = ref(false) //是否嵌入父节点

// 定义回调函数
let emits = defineEmits(['submit'])

const { width: windowWidth } = useWindowSize() //窗口大小

const width = computed(() => {
    return getContainer.value ? windowWidth.value : windowWidth.value - 390;
})

const fullScreen = () => {
    getContainer.value = !getContainer.value;
}

const show = () => {
    model.value = true
}

//父组件主动关闭
const close = () => {
    model.value = false;
}

//点击关闭按钮时判断编辑状态
const closeCheck = () => {
    if (isEdit.value) {
        model.value = true;
        ElMessageBox.confirm('确定要放弃编辑吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            model.value = false;
        }).catch(() => {
            model.value = true;
        });
    } else {
        model.value = false;
    }
}

const onSubmit = () => {
    emits('submit');
};

defineExpose({ show, close })

</script>
<style lang="scss" scoped></style>
